ZK 5: Frozen Column, In-place Editing and Rowspan
Jumper Chen, Engineer, Potix Corporation
September 10, 2009
ZK 5.0.0 and above
Introduction
Today, we're really pleased to launch several new ZK 5 features, including Frozen Column, In-place-editing and Rowspan within a grid. These features can enhance the usage of ZK to establish a flexible grid table to let the user modify and navigate the data quickly and easily, like a spreadsheet.
See Also
Live Demo
This is an annual report like a spreadsheet.
Features Overview
Frozen Columns
In ZK5, both components grid and listbox can use frozen columns.
For example.
<grid>
<frozen style="background: #dfded8" columns="3">
...
</frozen>
</grid>
In the above example, we add a new component called Frozen to freeze columns within Grids and Listboxs. The Frozen component can have any child component.
In-place Editing
In ZK5, all input elements can have the in-place-editing functionality, like the combobox, textbox, datebox, and so on.
For example,
<textbox inplace="true"/>
<combobox inplace="true"/>
<datebox inplace="true"/>
The inplace property is used to enable or disable the in-place-editing function for the input element.
Rowspan
In ZK5, we have introduced a new component named Cell which can be embedded into a Grid or Box (Hbox and Vbox) to fully control the layout and the style, in the same manner as we demonstrated in the demo above.
You can now use the rowspan or the colspan property to layout your Grid, for example a content cell can now cross over multiple rows.
<row>
<cell sclass="years" rowspan="12">
...
</cell>
</row>
Download
The demo could be downloaded here.
Summary
In this article, we demonstrated how to combine the three new features within the Grid component to improve the user experience, layout and navigation of your applications. Furthermore, in the upcoming ZK5 release, we will endeavour to make Zk even better and faster than it already is!
| Copyright © Jumper Chen. This article is licensed under GNU Free Documentation License. |